<html>
<head><style>
  div {
    width: 100px;
  }
  code::before {
    content: "[";
  }
  code::after {
    content: "]";
  }
  b::before, i::after {
    width: 5px;
    height: 5px;
    content: "";
    display: block;
    background: black;
  }
</style></head>
<body>
  <div>start</div>
  <div>
    text with <code>:before</code>
    and <code>:after</code> content,
    then a <b>bold</b> element with a
    <code>block</code> before content
    then a <i>italic</i> element with
    a <code>block</code> after content
  </div>
  <div>end</div>
</body>
</html>